<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Table 表格1</title>
	<link rel="stylesheet" href="../../static/css/element2.css">
	<script src="../../static/js/vue.global.prod.js"></script>
	<script src="../../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../../static/css/com.css">
<style>
.el-table__body .warning-row {
	background-color: #fdf6ec;
}
.el-table__body .success-row {
	background-color: #f0f9eb;
}
.el-table__body .info-row{
	background-color: #e5e5e5;
}
.color-primary {
    color: #409EFF;
}
.diy-bg-color{
	background-color: #d9ecff;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-affix :offset="10"><div id="a_link"></div></el-affix><script src="table.js"></script>
	<el-divider content-position="left">基础表格</el-divider><!-- =============================================================== -->
	<p class="desc">基础的表格展示用法。当 el-table 元素中注入 data 对象数组后，在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。 可以使用 width 属性来定义列宽。</p>
	<p class="desc">列的show-overflow-tooltip属性可以控制类容是否超出换行。 class-name是列的class</p>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column v-if="true" prop="date" label="Date" width="180" class-name="color-primary"></el-table-column>
		<el-table-column prop="name" label="Name" width="180" class-name="diy-bg-color" show-overflow-tooltip></el-table-column>
		<el-table-column prop="address" label="Address"></el-table-column>
	</el-table>
	
	<el-divider content-position="left">带斑马纹表格</el-divider><!-- =============================================================== -->
	<p class="desc">使用带斑马纹的表格，可以更容易区分出不同行的数据。stripe 属性可以创建带斑马纹的表格。 如果 true, 表格将会带有斑马纹。</p>
	<p class="desc">cell-class-name：单元格的 className 的回调方法，可以给指定的单元格加上指定CSS类</p>
	<el-table :data="tableData" :cell-class-name="cellClassName" stripe style="width: 100%">
		<el-table-column prop="id" label="ID" width="80"></el-table-column>
		<el-table-column prop="date" label="Date" width="180"></el-table-column>
		<el-table-column prop="name" label="Name" width="180"></el-table-column>
		<el-table-column prop="address" label="Address" :fit="isFalse"></el-table-column>
	</el-table>
	
	<el-divider content-position="left">带边框表格</el-divider><!-- =============================================================== -->
	<p class="desc">默认情况下，Table 组件是不具有竖直方向的边框的， 如果需要，可以使用 border 属性，把该属性设置为 true 即可启用。</p>
	<el-table :data="tableData" border style="width: 100%">
		<el-table-column prop="date" label="Date" width="180"></el-table-column>
		<el-table-column prop="name" label="Name" width="180"></el-table-column>
		<el-table-column prop="address" label="Address"></el-table-column>
	</el-table>
	
	<el-divider content-position="left">带状态表格</el-divider><!-- =============================================================== -->
	<p class="desc">可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class， 表明该行处于某种状态。</p>
	
	<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName2">
		<el-table-column prop="date" label="Date" width="180"></el-table-column>
		<el-table-column prop="name" label="Name" width="180"></el-table-column>
		<el-table-column prop="address" label="Address"></el-table-column>
	</el-table>
	
	<el-divider content-position="left">单选</el-divider><!-- =============================================================== -->
	<p class="desc">Table 组件提供了单选的支持， 只需要配置 highlight-current-row 属性即可实现单选。 之后由 current-change 事件来管理选中时触发的事件，它会传入 currentRow，oldCurrentRow。 如果需要显示索引，可以增加一列 el-table-column，设置 type 属性为 index 即可显示从 1 开始的索引号。</p>
	<p class="desc">选择单行数据时使用色块表示。</p>
	<el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%" @current-change="handleCurrentChange">
		<el-table-column type="index" width="50"></el-table-column>
		<el-table-column property="date" label="Date" width="120"></el-table-column>
		<el-table-column property="name" label="Name" width="120"></el-table-column>
		<el-table-column property="address" label="Address"></el-table-column>
	</el-table>
	<div style="margin-top: 20px">
		<el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
		<el-button @click="setCurrent()">清除选择</el-button>
	</div>
	
	<el-divider content-position="left">多选</el-divider><!-- =============================================================== -->
	<p class="desc">实现多选非常简单: 手动添加一个 el-table-column，设 type 属性为 selection 即可； 除了多个选项，此示例还使用 show-overflow-tooltip：默认， 如果内容过长，它会分成多行。 若需要单行显示可以使用 show-overflow-tooltip 属性，它接受一个 Boolean， 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。</p>
	<el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName3">
		<el-table-column type="selection" :selectable="selectAble" width="55"></el-table-column>
		<!-- <el-table-column label="Date" width="120">
			<template #default="scope">{{ scope.row.date }}</template>
		</el-table-column> -->
		<el-table-column property="id" label="ID号" width="120"></el-table-column>
		<el-table-column property="date" label="Date" width="120"></el-table-column>
		<el-table-column property="name" label="Name" show-overflow-tooltip width="120"></el-table-column>
		<el-table-column property="address" label="Address" show-overflow-tooltip></el-table-column>
	</el-table>
	<div style="margin-top: 20px">
		<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二和第三行的选择状态</el-button>
		<el-button @click="toggleSelection()">清除选择</el-button>
		<el-button @click="seeSelectionDataId()">查看选中的数据</el-button>
		<el-button @click="seeSelectData()">查看选中的数据2</el-button>
	</div>
	
	<el-divider content-position="left">排序</el-divider><!-- =============================================================== -->
	<p class="desc">在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。 可以使用 sort-method 或者 sort-by 使用自定义的排序规则。 如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件， 在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 在本例中，我们还使用了 formatter 属性，它用于格式化指定列的值， 接受一个 Function，会传入两个参数：row 和 column， 可以根据自己的需求进行处理。</p>
	<el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }" style="width: 100%">
		<el-table-column prop="id" label="Id" sortable width="100"></el-table-column>
		<el-table-column prop="date" label="Date" sortable width="180"></el-table-column>
		<el-table-column prop="name" label="Name" sortable width="180"></el-table-column>
		<el-table-column prop="money" label="Money" sortable :sort-method="sortFunc" width="180"></el-table-column>
		<el-table-column prop="address" label="Address" :formatter="formatter"></el-table-column>
	</el-table>
	
	<el-divider content-position="left">常用表格 - 自定义</el-divider><!-- =============================================================== -->
	<p class="desc">自定义实际使用，最常用的表格</p>
	<el-table :data="tableData" style="width: 100%" stripe border>
		<el-table-column v-if="true" prop="date" label="Date" width="180" header-align="center" align="center"></el-table-column>
		<el-table-column prop="name" label="Name" width="180" show-overflow-tooltip header-align="center" align="center"></el-table-column>
		<el-table-column prop="address" label="Address" header-align="center" align="center"></el-table-column>
	</el-table>
</div>
</body>

<script>

const Main = {
	data() {
		return {
			isTrue: true,
			isFalse: false,
			value: '',
			fileIndex: 1,
			multipleSelection: [],
			selectionDataId:[1,2,3],
			tableData: [
				{
					id: 6001,
					select: 0,
					date: '2016-05-03',
					name: 'Tom1 --- No. 189, Grove St, Los Angeles --- No. 189, Grove St, Los Angeles --- No. 189, Grove St, Los Angeles',
					address: 'No. 189, Grove St, Los Angeles --- No. 189, Grove St, Los Angeles --- No. 189, Grove St, Los Angeles',
					money: '7'
				},
				{
					id: 6002,
					select: 0,
					date: '2017-05-02',
					name: 'Tom2',
					address: 'No. 189, Grove St, Los Angeles --- No. 189, Grove St, Los Angeles --- No. 189, Grove St, Los Angeles',
					money: '123'
				},
				{
					id: 6003,
					select: 1,
					date: '2016-05-04',
					name: 'Tom4',
					address: 'No. 189, Grove St, Los Angeles',
					money: '8.23'
				},
				{
					id: 6004,
					select: 1,
					date: '2016-05-01',
					name: 'Tom3',
					address: 'No. 189, Grove St, Los Angeles',
					money: '1111.22'
				},
			],
		}
	},
	computed:{
		btn(){
			return function(i){
				if(this.$data.fileIndex == i){
					return "layui-btn";
				}else{
					return "layui-btn0";
				}
			}
		},
		getSelectIds(){
			let ids = [];
			this.$refs.multipleTable.getSelectionRows().forEach(function(v, k){
				ids.push(v.id);
			})
			return ids;
		},
		
	},
	methods:{
		// 单元格的 className 的回调方法
		cellClassName(data){
			// data: { row: any, column: any, rowIndex: number, columnIndex: number }
			// console.log(data);
			let ret = '';
			if(data.row.name == "Tom4" && data.column.property == 'name'){
				ret = 'red';
			}
			return ret;
		},
		//带状态表格
		tableRowClassName2(row){
			if (row.rowIndex == 1) {
				return 'warning-row';
			} else if (row.rowIndex == 3) {
				return 'success-row';
			}
			// console.log(row);
			// console.log(row.rowIndex);
			return "abc";
		},
		// 单选
		setCurrent(row) {
			this.$refs.singleTable.setCurrentRow(row)
		},
		handleCurrentChange(val) {
			console.log("选中数据：", val)
			this.currentRow = val
		},
		
		// 清除选择
		toggleSelection(rows) {
			if (rows) {
				rows.forEach((row) => {
					this.$refs.multipleTable.toggleRowSelection(row)
				})
			} else {
				this.$refs.multipleTable.clearSelection()
			}
		},
		//控制多选框是否可选（返回true则为可选）
		selectAble(row, index){
			return row.select == 1;
		},
		//不可选，则变灰色
		tableRowClassName3(row){
			// console.log(row.row.select)
			if (row.row.select == 1) {
				return '';
			}else{
				return "info-row";
			}
		},
		
		handleSelectionChange(val) {
			let THIS = this;
			console.log("每次选择后，获取选择的数据：", val);
			val.forEach(function(v, k){
				THIS.$data.selectionDataId.push(v.id);
				// console.log(v.id);
			})
			// this.println();
			this.multipleSelection = val
		},
		seeSelectionDataId(){
			console.log("选中的数据：", this.multipleSelection);
			console.log("选中的数据ID：", this.getSelectIds);
		},
		seeSelectData(){
			console.log(this.$refs.multipleTable.getSelectionRows());
		},
		
		//排序 - 自定义排序
		sortFunc(a, b){
			// console.log('a', a);
			// console.log("b", b);
			return Number(a.money) - Number(b.money);
		},
		
		//排序 - 格式化程序
		formatter(row, column) {
			// console.log(333, row, column)
			if(row.id == 6003){
				return row.address + "================";
			}
			return row.address
		},
		
		println(){
			//在其他方法中这样调用：this.println();
			console.log("test print");
		}
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
// console.log(ElementPlus)
</script>
</html>
